<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <meta charset="utf-8" />
    <title>${dict:getConfigValueByKey('WEB_NAME','管理平台')} | 字典管理</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/ztree/css/zTreeStyle.css">
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <%--<link rel="stylesheet" href="${ctxStatic}/js/page/paging.css" type="text/css" />--%>
    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>系统设置</li>
                <li class="active">权限管理</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>

    <div class="col-sm-3">
        <style>.line{height:auto;} .ztree{overflow-y: auto;}</style><%--这个不能删除--%>
        <ul id="tree" class="ztree"></ul><!-- 权限树 -->
    </div>

    <div class="col-sm-9">
    <section class="panel panel-default">
        <%--操作区域 开始--%>
        <div class="row wrapper">
            <div class="col-sm-3 m-b-xs">
                <button class="btn btn-sm btn-default" onclick="addResource();">新增</button>

                <%--<button class="btn btn-sm btn-default" onclick="addFourResource();">添加四项权限</button>--%>
                <input type="hidden" id="chosenResource" value="1"/>
            </div>
            <div class="col-sm-9 m-b-xs">
                <label class="control-label text-danger">此处为系统核心模块，请谨慎操作！！（安全起见，请与技术人员沟通后再操作）</label>
            </div>
            <%--搜索区域--%>
            <%--<div class="col-sm-3">--%>
                <%--<div class="input-group">--%>
                    <%--<input id="searchKey" type="text" class="input-sm form-control" placeholder="输入关键词">--%>
                    <%--<span class="input-group-btn">--%>
                            <%--<button onclick="searchPage(1);" class="btn btn-sm btn-default" type="button">搜索</button>--%>
                    <%--</span>--%>
                <%--</div>--%>
            <%--</div>--%>
        </div>
        <%--操作区域 结束--%>

        <div class="table-responsive">
            <table class="table table-striped b-t b-light">
                <thead>
                <tr>
                    <%--<th class="text-center" style="width:60px;">标识</th>--%>
                    <th class="text-center" >归属</th>
                    <th class="text-center" >名称</th>
                    <th class="text-center" >类型</th>
                    <th class="text-center" >链接</th>
                    <th class="text-center" >排序</th>
                    <%--<th class="text-center" width="10%">状态</th>--%>
                    <th class="text-center" >权限</th>
                    <th class="text-center" >操作</th>
                </tr>
                </thead>
                <tbody id="tplView">

                </tbody>

            </table>
        </div>

        <footer class="panel-footer">
            <div class="row">
                <%--分页--%>
                <div id="page" class="col-sm-12 text-right text-center-xs"></div>
            </div>

        </footer>

    </section>
    </div>
</section>

<%--弹出层 明细--%>
<div id="itemTable"  style="display: none;">
    <div class="table-responsive" style="padding:5px 15px;">
        <table class="table table-striped b-t b-light">
            <thead>
            <tr>
                <th class="text-center" width="30%">代码</th>
                <th class="text-center" width="30%">名称</th>
                <th class="text-center" width="10%">排序</th>
                <th class="text-center" width="30%">备注</th>
            </tr>
            </thead>
            <tbody id="itemTplView">

            </tbody>
        </table>
    </div>
</div>
</body>
<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tools.js?version=${ctxVersion}"></script>
<script type="text/javascript" src="${ctxStatic}/js/page/paging.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>
<script src="${ctxStatic}/js/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/table2excel/jquery.table2excel.js"></script>
<%--加载分页总表数据--%>
<script id="tplHtml" type="text/x-jquery-tmpl">
    {{if results && results.length>0}}
        {{each results}}
        <tr>
            <%--<td class="text-center" >{{= id}}</td>--%>
            <td class="text-center">{{= resource.name}}</td>
            <td class="text-center" >{{= name }}</td>
            <td class="text-center">{{= type }}</td>
            <td class="text-center" title="{{= url }}">{{if url!=""}}查看{{else}}--{{/if}}</td>
            <td class="text-center" >{{= sort }}</td>
            <%--<td class="text-center" >{{if available}}<span class="label label-success">可用</span>{{else}}<span class="label label-danger">禁用</span>{{/if}}</td>--%>
            <td>{{= permission }}</td>
            <td class="text-center">
                <a href="javascript:;" onclick="openModel('','${ctx}/resource/update?id={{= id }}',true,true)" class="btn btn-sm btn-info">编辑</a>
                <a href="javascript:;" onclick="deleteData('{{= id}}')" title="删除" class="btn btn-sm btn-danger">删除</a>
            </td>
        </tr>
        {{/each}}
    {{else}}
        <tr><td colspan="9" class="text-center" >暂无数据</td></tr>
    {{/if}}
</script>
<script>
    /** 初始化方法 */
    $(function(){
        // 加载权限树
        loadTree();
        // 加载列表
        searchPage(1);
    })

    //查询分页数据
    function searchPage(num){
        var parentId = $("#chosenResource").val();
        var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
        $.ajax({
            type: 'post',
            url: '${ctx}/resource/getPage.json',
            dataType:"json",
            data: {"pageNo":num,"pageSize":$("#paging_js_page_size").val(),"id":parentId},
            success: function (data) {
                layer.close(loadingLayer);
                var page = data.data;
                $( "#tplView" ).empty();
                $( "#tplHtml" ).tmpl( data.data ).appendTo( "#tplView" );

                //分页
                $("#page").paging({
                    pageNo:page.pageNo,
                    totalPage: page.totalPage,
                    totalSize: page.totalRecord,
                    callback: function(num) {
                        searchPage(num);
                    }
                })

            },error:function(){
                layer.close(loadingLayer);
                showMsg("点击过快或程序异常");
            }
        });
    }
    // 加载权限树
    function loadTree(){
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback : {
                onClick : function(event, treeId, treeNode) {
                    $("#chosenResource").val(treeNode.id);
                    <%--location.href = "${ctx}/resource?id="+treeNode.id;--%>
                    searchPage(1);
                }
            }
        };
        // 查询所有权限菜单
        $.ajax({
            type: 'get',
            url: '${ctx}/resource/getMenus.json?timeStamp='+new Date().getTime(),
            dataType:"json",
            data: {},
            success: function (data) {
                var list = data.data;
                var zNodes = [];
                for(var i=0;i<list.length;i++){
                    zNodes[i] = {
                        id: list[i].id,
                        pId: list[i].parentId,
                        name: list[i].name,
                        open: 1
                    };
                }
                $.fn.zTree.init($("#tree"), setting, zNodes);
            },error:function(){
                showMsg("点击过快或程序异常");
            }
        });
    }
    // 打开新增页面
    function addResource(){
        openModel(false,'${ctx}/resource/create?id='+$("#chosenResource").val());
    }
    /** 添加四项权限 */
    function addFourResource(){
        layer.prompt({title: '输入权限前缀（如：sys:user:）', formType: 2}, function(text, index){
            layer.close(index);
            var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
            //根据项目标识获取目录
            $.ajax({
                type: 'post',
                url: '${ctx}/resource/createFour.json?timeStamp='+new Date().getTime(),
                dataType:"json",
                data: {"resourceId":$("#chosenResource").val(),"name":text},
                success: function (data) {
                    layer.close(loadingLayer);
                    showMsg(data.desc,function(){
                        if(data.ret==1) {//成功
                            searchPage(1);
                        }
                    });
                },error:function(){
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        });
    }

    /**删除数据*/
    function deleteData(id){
        layer.confirm('确认删除此数据吗？', {
            btn: ['确认删除','取消'] //按钮
        }, function(){
            var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
            $.ajax({
                type: 'post',
                url: '${ctx}/resource/delete.json?timeStamp='+new Date().getTime(),
                dataType:"json",
                data: {"id":id},
                success: function (data) {
                    layer.close(loadingLayer);
                    searchPage(1);
                    // 加载权限树
                    loadTree();
                    showMsg(data.desc);
                },error:function(){
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        }, function(){

        });
    }
</script>
</html>
